<template>
  <div>
    <van-image width="100%" :src="img" class="image" v-show="isShow" />
    <van-swipe @change="onChange" touchable>
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <van-image :src="image" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <van-button round type="info" v-show="isBtn" size="mini" to="login"
      >立即体验</van-button
    >
  </div>
</template>

<script>
export default {
  // beforeRouteEnter(to, from, next) {
  // },
  data() {
    return {
      isShow: true,
      isBtn: false,
      img: require("@/assets/images/12.jpg"),
      images: [
        require("@/assets/images/13.jpg"),
        require("@/assets/images/14.jpg"),
        require("@/assets/images/15.jpg"),
      ],
    };
  },
  methods: {
    onChange(index) {
      index == 2 ? (this.isBtn = true) : (this.isBtn = false);
    },
    // touch() {
    //   this.$router.push("login");
    //   window.localStorage.setItem("first", true);
    // },
  },
  async mounted() {
    await setTimeout(() => {
      this.isShow = false;
    }, 5000);
  },
};
</script>

<style scoped lang="less">
div {
  .image {
    position: absolute;
    z-index: 999;
  }
  .van-button {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%);
  }
}
</style>
